<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

// 当前激活的标签页
const activeTab = ref('comments')

// 评论和@消息
const comments = ref([
  {
    id: 1,
    type: 'comment',
    user: {
      name: '用户A',
      avatar: 'https://picsum.photos/40/40?random=1'
    },
    content: '这篇文章写得很好，观点很独到！',
    article: {
      id: 1,
      title: 'ChatGPT-4展现惊人能力，AI发展迎来新突破'
    },
    time: '2小时前',
    isRead: false
  },
  {
    id: 2,
    type: 'mention',
    user: {
      name: '用户B',
      avatar: 'https://picsum.photos/40/40?random=2'
    },
    content: '@科技新闻观察员 这个观点怎么看？',
    article: {
      id: 2,
      title: '量子计算研究获重大进展'
    },
    time: '3小时前',
    isRead: true
  }
])

// 新增粉丝
const followers = ref([
  {
    id: 1,
    user: {
      name: '人工智能爱好者',
      avatar: 'https://picsum.photos/40/40?random=3',
      headline: 'AI领域研究者，关注前沿技术发展'
    },
    time: '1小时前',
    isFollowing: false,
    isRead: false
  },
  {
    id: 2,
    user: {
      name: '科技评论员',
      avatar: 'https://picsum.photos/40/40?random=4',
      headline: '专注科技领域深度分析'
    },
    time: '2小时前',
    isFollowing: true,
    isRead: true
  }
])

// 赞和收藏
const likes = ref([
  {
    id: 1,
    type: 'like',
    users: [
      {
        id: 1,
        name: '用户A',
        avatar: 'https://picsum.photos/40/40?random=5'
      },
      {
        id: 2,
        name: '用户B',
        avatar: 'https://picsum.photos/40/40?random=6'
      }
    ],
    count: 5,
    article: {
      id: 1,
      title: '11111111111111111111111'
    },
    time: '1小时前',
    isRead: false
  },
  {
    id: 2,
    type: 'favorite',
    users: [
      {
        id: 3,
        name: '用户C',
        avatar: 'https://picsum.photos/40/40?random=7'
      }
    ],
    count: 1,
    article: {
      id: 2,
      title: '量子计算研究获重大进展'
    },
    time: '2小时前',
    isRead: true
  }
])

// 跳转到文章详情
const goToArticle = (id: number) => {
  router.push(`/article/${id}`)
}

// 跳转到用户主页
const goToUserProfile = (id: number) => {
  router.push(`/user/${id}`)
}

// 关注/取消关注用户
const toggleFollow = (follower: any) => {
  follower.isFollowing = !follower.isFollowing
}

// 删除消息
const deleteMessage = (id: number) => {
  // 根据消息类型删除对应的消息
}
</script>

<template>
  <div class="max-w-[1000px] mx-auto py-8 px-4">
    <div class="bg-white rounded-lg">
      <!-- 标签页 -->
      <el-tabs
        v-model="activeTab"
        class="px-4"
      >
        <!-- 评论和@ -->
        <el-tab-pane
          label="评论和@"
          name="comments"
        >
          <div class="divide-y">
            <div
              v-for="item in comments"
              :key="item.id"
              :class="['p-4 hover:bg-gray-50', { 'bg-blue-50': !item.isRead }]"
            >
              <div class="flex items-start gap-4">
                <el-avatar
                  :size="40"
                  :src="item.user.avatar"
                  class="cursor-pointer flex-shrink-0"
                  @click="goToUserProfile(item.user.id)"
                />
                <div class="flex-1 min-w-0">
                  <div class="flex justify-between mb-1">
                    <div>
                      <div
                        class="font-bold hover:text-blue-500 cursor-pointer mb-2"
                      >
                        {{ item.user.name }}
                      </div>
                      <p class="text-gray-800 mb-2">{{ item.content }}</p>
                      <div
                        class="text-gray-500 hover:text-blue-500 cursor-pointer"
                        @click="goToArticle(item.article.id)"
                      >
                        {{ item.article.title }}
                      </div>
                    </div>
                    <div class="flex flex-col items-end gap-2">
                      <el-icon
                        class="text-gray-400 hover:text-red-500 cursor-pointer"
                        @click="deleteMessage(item.id)"
                      >
                        <Delete />
                      </el-icon>
                      <span class="text-gray-500 text-sm">{{ item.time }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>

        <!-- 新增粉丝 -->
        <el-tab-pane
          label="新增粉丝"
          name="followers"
        >
          <div class="divide-y">
            <div
              v-for="follower in followers"
              :key="follower.id"
              :class="[
                'p-4 hover:bg-gray-50',
                { 'bg-blue-50': !follower.isRead }
              ]"
            >
              <div class="flex items-start gap-4">
                <el-avatar
                  :size="40"
                  :src="follower.user.avatar"
                  class="cursor-pointer flex-shrink-0"
                  @click="goToUserProfile(follower.user.id)"
                />
                <div class="flex-1 min-w-0">
                  <div class="flex justify-between mb-1">
                    <div>
                      <div class="flex items-center gap-2 mb-2">
                        <span
                          class="font-bold hover:text-blue-500 cursor-pointer"
                        >
                          {{ follower.user.name }}
                        </span>
                        <el-button
                          :type="follower.isFollowing ? 'default' : 'primary'"
                          size="small"
                          @click="toggleFollow(follower)"
                        >
                          {{ follower.isFollowing ? '已关注' : '关注' }}
                        </el-button>
                      </div>
                      <p class="text-gray-800 mb-2">
                        {{ follower.user.headline }}
                      </p>
                    </div>
                    <div class="flex flex-col items-end gap-2">
                      <el-icon
                        class="text-gray-400 hover:text-red-500 cursor-pointer"
                        @click="deleteMessage(follower.id)"
                      >
                        <Delete />
                      </el-icon>
                      <span class="text-gray-500 text-sm">{{
                        follower.time
                      }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>

        <!-- 赞和收藏 -->
        <el-tab-pane
          label="赞和收藏"
          name="likes"
        >
          <div class="divide-y">
            <div
              v-for="item in likes"
              :key="item.id"
              :class="['p-4 hover:bg-gray-50', { 'bg-blue-50': !item.isRead }]"
            >
              <div class="flex items-start gap-4">
                <div class="flex -space-x-2 flex-shrink-0">
                  <el-avatar
                    v-for="user in item.users.slice(0, 2)"
                    :key="user.id"
                    :size="40"
                    :src="user.avatar"
                    class="border-2 border-white cursor-pointer"
                    @click="goToUserProfile(user.id)"
                  />
                </div>
                <div class="flex-1 min-w-0">
                  <div class="flex justify-between mb-1">
                    <div>
                      <div
                        class="font-bold hover:text-blue-500 cursor-pointer mb-2"
                      >
                        <span
                          v-for="(user, index) in item.users.slice(0, 2)"
                          :key="user.id"
                        >
                          {{ user.name }}
                          <template
                            v-if="index < item.users.length - 1 && index < 1"
                          >
                            、
                          </template>
                        </span>
                        <template v-if="item.count > 2">
                          等 {{ item.count }} 人
                        </template>
                      </div>
                      <p class="text-gray-800 mb-2">
                        {{
                          item.type === 'like'
                            ? '赞了你的文章'
                            : '收藏了你的文章'
                        }}
                      </p>
                      <div
                        class="text-gray-500 hover:text-blue-500 cursor-pointer"
                        @click="goToArticle(item.article.id)"
                      >
                        {{ item.article.title }}
                      </div>
                    </div>
                    <div class="flex flex-col items-end gap-2">
                      <el-icon
                        class="text-gray-400 hover:text-red-500 cursor-pointer"
                        @click="deleteMessage(item.id)"
                      >
                        <Delete />
                      </el-icon>
                      <span class="text-gray-500 text-sm">{{ item.time }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<style lang="less" scoped>
:deep(.el-tabs__nav-wrap::after) {
  height: 1px;
  background-color: #f0f2f5;
}

:deep(.el-tabs__active-bar) {
  background-color: #056de8;
}

:deep(.el-tabs__item) {
  font-size: 16px;
  padding: 0 32px;

  &.is-active {
    color: #056de8;
    font-weight: 500;
  }

  &:hover {
    color: #056de8;
  }
}
</style>
